<template>
  <van-tabs v-model="activeName" animated swipeable>
    <van-tab v-for="item in tabMapOptions" :key="item.type" :name="item.type" :title="item.title">
      <keep-alive>
        <search-house-pane v-if="activeName === item.type" :type="item.type" />
      </keep-alive>
    </van-tab>
  </van-tabs>
</template>

<script>
/*
 *组件划分：tab组件、搜索框、搜索历史、热门搜索
 *页面划分：首页搜索页、新房搜索页、二手房搜索页
 */
import { Tab, Tabs } from 'vant'
import SearchHousePane from './components/SearchHousePane'
export default {
  name: 'SearchHouse',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    SearchHousePane
  },
  data() {
    return {
      // tabs标签页数据
      tabMapOptions: [
        {
          title: '综合',
          type: '1'
        },
        {
          title: '新房',
          type: '2'
        },
        {
          title: '二手房',
          type: '3'
        },
        {
          title: '商用房',
          type: '4'
        },
        {
          title: '装修',
          type: '5'
        }
      ],
      activeName: '1'
    }
  },
  beforeRouteEnter(to, from, next) {
    // 进入之前缓存本组件，解决第一次不缓存列表页的问题
    next((vm) => {
      vm.$store.commit('permission/SET_INCLUDELIST', ['Home', 'SearchHouse'])
    })
  },
  beforeRouteLeave(to, from, next) {
    // 跳转到详情页时缓存当前列表页，反之不缓存
    if (to.path.indexOf('/house/list') > -1) {
      this.$store.commit('permission/SET_INCLUDELIST', ['Home', 'SearchHouse'])
    } else {
      this.$store.commit('permission/SET_INCLUDELIST', ['Home'])
      this.$destroy() // 销毁vue实例
    }
    next()
  }
}
</script>

<style lang="less">
.search-house-scroll {
  height: calc(100vh - 98px);
  overflow: auto;
}
</style>
